<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的封面型音乐播放器</title>

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

<!--<div id="div1"><img src="img/bg.jpeg" alt=""/></div>-->

<div class="music-player" >
	<div class="zj"></div>
	<div class="info">
		<div class="center">
			<div class="jp-playlist">
				<ul>
					<li>sss</li>
				</ul>
			</div>
		
		</div>
		<div class="progress jp-seek-bar">
			<span class="jp-play-bar" style="width: 0%"></span>
		</div>
	</div>

	<div class="controls">
		<div class="play-controls">
			<a href="javascript:;" class="icon-previous jp-previous" title="previous"></a>
			<a href="javascript:;" class="icon-play jp-play" title="play"></a>
			<a href="javascript:;" class="icon-pause jp-pause" title="pause"></a>
			<a href="javascript:;" class="icon-next jp-next" title="next"></a>
		</div>
		<div class="volume-level jp-volume-bar">
			<span class="jp-volume-bar-value" style="width: 0%"></span>
			<a href="javascript:;" class="icon-volume-up jp-volume-max" title="max volume" ></a>
			<a href="javascript:;" class="icon-volume-down jp-mute" title="mute"></a>
		</div>
	</div>
	<div class=".play">play</div>
	
	<div id="jquery_jplayer" class="jp-jplayer"></div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src='js/jquery.jplayer.min.js'></script>
<script type="text/javascript" src='js/jplayer.playlist.min.js'></script>
<!--<script type="text/javascript" src="js/index.js"></script>-->
<script type="application/javascript">
	$(function(){
		var title = getValue("title");
		var url = getValue("url");
		var pic = getValue("pic");
		play(title,url,pic)
	});
	//获取html传参
	function getValue(key) {
		var name = key;
		var str = window.location.search;
		if (str.indexOf(name) != -1) {
			var pos_start = str.indexOf(name) + name.length + 1;
			var pos_end = str.indexOf("&", pos_start);
			if (pos_end == -1) {
				return decodeURIComponent(str.substring(pos_start));
			} else {
				return decodeURIComponent(str.substring(pos_start, pos_end));
			}
		}
	}

	function play(title,url,pic){
		var playlist = [{
			title:title,
			artist:"",
			mp3:url,
			/*下面是海报*/
			poster: pic
		},];


		var cssSelector = {
			jPlayer: "#jquery_jplayer",
			cssSelectorAncestor: ".music-player"
		};

		var options = {
			swfPath: "Jplayer.swf",
			supplied: "ogv, m4v, oga, mp3"
		};

		var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
	}
</script>

</body>
</html>